@import 'colors';

:root {
  --spoke-action-color: #{$bright-blue};
  --spoke-action-text-color: white;
  --twitter-action-color: #1da1f2;
  --twitter-link-color: #5e93c5;
  --twitter-panel-background-color: #e6ecf0;
  --twitter-editor-border-color: #a4d9f9;
  --discord-text-color: white;
  --discord-background-color: #2A2D32;
  --discord-subtitle-color: #A3A3A3;
  --discord-action-color: #7289DA;
  --discord-secondary-text-color: #{$grey-text};
  --discord-secondary-action-color: #{$darker-grey};
  --slack-action-color: #611F69;
  --hud-panel-background: rgba(79, 79, 79, 0.45);
  --hud-dropdown-background-color: rgba(72, 72, 72, 0.2);
  --hud-dropdown-border-color: rgba(72, 72, 72, 0.3);
  --hud-panel-text-color: #{$light-text};
  --hud-panel-link-color: white;
  --overlay-text-field-text-color: white;
  --overlay-text-field-widget-color: #{$dark-grey};
  --overlay-text-field-background-color: rgba(64, 64, 64, 0.55);
  --overlay-text-field-focused-background-color: #{$darker-grey};
  --overlay-text-field-placeholder-color: #{$dark-grey};
  --overlay-text-field-disabled-color: #{$dark-grey};
  --lightbox-text-color: white; // connect to device dialog
  --lightbox-icon-color: black;
  --lightbox-text-field-color: white; // connect to device dialog
  --lightbox-text-field-border-color: #e2e2e2; // connect to device dialog
  --lightbox-text-field-text-color: black; // connect to device dialog
  --lightbox-background-color: rgba(0, 0, 0, 0.9);
  --lightbox-icon-background-color: white;
  --lightbox-widget-color: #{$darker-grey};
  --post-session-splash-text-color: white;
  --post-session-splash-background-color: black;
  --post-session-splash-secondary-action-color: #{$light-text};
  --vr-interstitial-background-color: rgba(0, 0, 0, 0.9);
  --vr-interstitial-text-color: #{$light-text};
}

.light-theme {
  --action-button-secondary-background: white;
  --text-field-text-color: black;
  --text-field-widget-color: #{$darkest-grey};
  --text-field-background-color: white;
  --text-field-placeholder-color: #{$dark-grey};
  --text-field-disabled-color: #{$dark-grey};
  --text-field-border-color: #e2e2e2;
  --panel-action-button-secondary-background: #f4f4f4;
  --panel-background-color: #{$white-transparent};
  --panel-text-color: black;
  --panel-overlay-text-color: black;
  --panel-overlay-background-color: rgba(0,0,0,0.85);
  --overlay-button-background-color: white;
  --overlay-button-icon-color: #{$darkest-grey}; // favorite button
  --action-button-secondary-icon: #{$dark-grey}; // eg avatar upload button
  --full-panel-background-color: rgba(255, 255, 255, 0.98);
  --menu-background-color: white;
  --menu-link-color: black;
  --menu-link-underline-color: #{$dark-grey};
  --menu-header-text-color: #{$dark-grey};
  --menu-text-color: black;
  --menu-icon-color: #{$darkest-grey};
  --menu-attach-point-color: #{$white-transparent};
  --panel-rule-color: #{$light-grey};
  --panel-link-underline-color: #{$dark-grey};
  --panel-widget-color: #{$dark-grey};
  --unfavorited-color: #{$dark-grey};
  --panel-widget-disabled-color: #{$dark-grey};
  --panel-title-underline-color: #{$dark-grey};
  --panel-subtitle-color: #{$dark-grey};
  --panel-subtext-color: #{$grey-text};
  --panel-subtext-link-color: #{$dark-grey};
  --panel-subtext-disabled-color: #{$light-grey};
  --panel-icon-color: #{$darker-grey};
  --overlay-text-color: black;
  --loading-background-color: #d7e5ec;
  --loading-spinner-color: #555;
  --loading-text-color: #{$darker-grey};
  --lobby-overlay-widget-background-color: #{$white-transparent}; // lobby chat bubbles
  --lobby-overlay-widget-text-color: black;
  --lobby-overlay-widget-thumbnail-border-color: rgba(255, 255, 255, 0.15);
  --spawned-overlay-widget-background-color: black; // in-VR chat bubbles
  --spawned-overlay-widget-source-text-color: #{$light-text};
  --spawned-overlay-widget-text-color: white;
  --spawned-overlay-widget-link-color: white;
  --chat-popup-background-color: #{$darker-grey};
  --chat-popup-text-color: #{$light-text};
  --home-background-color: white;
  --home-header-background-color: white;
  --home-footer-background-color: white;
  --home-header-link-color: black;
  --home-footer-text-color: black;
  --home-footer-link-color: #676767;
  --home-text-color: black;
  --home-media-panel-background-color: rgba(255, 255, 255, 0.6);
  --link-background-color: white;
  --link-text-color: black;
  --link-button-highlight-color: rgba(255, 255, 255, 0);
  --link-keypad-background-color: #f7f7f7;
  --link-button-background-color: white;
  --link-entry-color: black;
  --link-button-active-background-color: #{$light-grey};
  --link-button-active-color: #{$light-grey};
  --link-button-disabled-color: #{$light-grey};
  --link-icon-color: #333;
  --link-code-loading-background: rgba(0.4, 0.4, 0.4, 0.85);
  --scene-text-color: white;
  --scene-overlay-text-color: black;
  --scene-loading-overlay-color: rgba(255, 255, 255, 0.2);
  --tile-button-tip-background-color: #{$darker-grey};
  --tile-button-tip-text-color: #{$light-text};
  --tile-button-icon-color: black;
  --tile-button-icon-hover-color: white;
  --tile-button-background-color: #ffffffde;
  --tile-inset-text: #{$dark-grey-text};
  --tile-selected-color: #eaeaea;
  --tile-title-color: black;
  --tile-subtitle-color: #{$dark-grey-text};
  --tile-subtitle-link-color: #{$dark-grey};
  --tile-subtext-color: #{$grey-text};
  --tile-background-color: #{$light-grey};
  --tile-alt-background-color: #{$lighter-grey};
  --tile-empty-text-color: grey;
  --overflow-tip-background-color: rgba(220, 220, 220, 0.5);
  --overflow-tip-icon-color: black;
  --icon-button-background-color: black;
  --icon-button-border-color: white;
}

.dark-theme {
  --action-button-secondary-background: #{$darker-grey};
  --text-field-text-color: #{$light-grey};
  --text-field-widget-color: #{$lighter-grey};
  --text-field-background-color: #{$darker-grey};
  --text-field-placeholder-color: #{$dark-grey};
  --text-field-disabled-color: #{$darkest-grey};
  --text-field-border-color: #{$darker-grey};
  --panel-action-button-secondary-background: #{$darker-grey};
  --panel-background-color: #{$darkest-grey-transparent};
  --panel-text-color: #{$off-white};
  --panel-overlay-text-color: black;
  --panel-overlay-background-color: rgba(0,0,0,0.85);
  --overlay-button-background-color: rgba(50, 50, 50, 0.95);
  --overlay-button-icon-color: #{$light-grey}; // favorite button
  --unfavorited-color: #{$dark-grey};
  --action-button-secondary-icon: #{$off-white}; // eg avatar upload button
  --full-panel-background-color: rgba(32, 32, 32, 0.98);
  --menu-background-color: #{$darkest-grey-transparent};
  --menu-link-color: #{$off-white};
  --menu-link-underline-color: #{$dark-grey};
  --menu-header-text-color: #{$light-grey};
  --menu-text-color: #{$off-white};
  --menu-icon-color: #{$light-grey};
  --menu-attach-point-color: #{$darkest-grey-transparent};
  --panel-rule-color: #{$dark-grey};
  --panel-link-underline-color: #{$dark-grey};
  --panel-widget-color: #{$dark-grey};
  --panel-widget-disabled-color: #{$dark-grey};
  --panel-title-underline-color: #{$dark-grey};
  --panel-subtitle-color: #{$light-grey};
  --panel-subtext-color: #{$off-white};
  --panel-subtext-link-color: #{$dark-grey};
  --panel-subtext-disabled-color: #{$darker-grey};
  --panel-icon-color: #{$dark-grey};
  --overlay-text-color: black;
  --loading-background-color: #{$darkest-grey};
  --loading-spinner-color: #{$dark-grey};
  --loading-text-color: #{$light-grey};
  --lobby-overlay-widget-background-color: #{$darkest-grey-transparent}; // lobby chat bubbles
  --lobby-overlay-widget-text-color: #{$off-white};
  --lobby-overlay-widget-thumbnail-border-color: rgba(64, 64, 64, 0.15);
  --spawned-overlay-widget-background-color: black; // in-VR chat bubbles
  --spawned-overlay-widget-source-text-color: #{$light-text};
  --spawned-overlay-widget-text-color: white;
  --spawned-overlay-widget-link-color: white;
  --chat-popup-background-color: #{$darker-grey};
  --chat-popup-text-color: #{$light-text};
  --home-background-color: #{$darkest-grey};
  --home-header-background-color: #{$darkest-grey};
  --home-footer-background-color: black;
  --home-header-link-color: #{$off-white};
  --home-footer-text-color: white;
  --home-footer-link-color: white;
  --home-text-color: #{$off-white};
  --home-media-panel-background-color: rgba(255, 255, 255, 0.1);
  --link-background-color: #{$darkest-grey};
  --link-text-color: #{$off-white};
  --link-button-highlight-color: #{$light-grey};
  --link-keypad-background-color: #{$darkest-grey};
  --link-button-background-color: rgba(16, 16, 16, 1);
  --link-entry-color: #{$off-white};
  --link-button-active-background-color: #{$light-grey};
  --link-button-active-color: #{$light-grey};
  --link-button-disabled-color: #{$light-grey};
  --link-icon-color: #333;
  --link-code-loading-background: rgba(0.4, 0.4, 0.4, 0.85);
  --scene-text-color: white;
  --scene-overlay-text-color: black;
  --scene-loading-overlay-color: rgba(255, 255, 255, 0.2);
  --tile-button-tip-background-color: #{$darker-grey};
  --tile-button-tip-text-color: #{$light-text};
  --tile-button-icon-color: black;
  --tile-button-icon-hover-color: white;
  --tile-button-background-color: #ffffffde;
  --tile-inset-text: #{$dark-grey-text};
  --tile-selected-color: #{$darker-grey};
  --tile-title-color: #{$off-white};
  --tile-subtitle-color: #{$light-text};
  --tile-subtitle-link-color: #{$light-grey};
  --tile-subtext-color: #{$dark-grey};
  --tile-background-color: #{$dark-grey};
  --tile-alt-background-color: #{$darker-grey};
  --tile-empty-text-color: #{$light-grey};
  --overflow-tip-background-color: rgba(220, 220, 220, 0.5);
  --overflow-tip-icon-color: black;
  --icon-button-background-color: black;
  --icon-button-border-color: #{$dark-grey};
}
